<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue-cli脚手架</title>
	</head>
	<body>

		<script type="text/javascript">
			

			/* vue-cli
			.. vue 基础指令  路由  vuex   组件化  --大量的插件
			Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统
			vue-cli 是一个官方发布 vue.js 项目脚手架，一个专门为单页面应用快速搭建繁杂的页面的脚手架，
			它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板
			
			
			1.安装node.js  进入安装页面去下载
			 把默认的工具安装上 ···安装过程中有一很长串的英文勾上
			 node 重装 容易丢包
			 node -v 检查版本 
			 npm  -v 检查版本   node  package manage (node的包管理)
			 
			 nvm
			 
			 
			 2.安装淘宝镜像 
			 百度淘宝镜像 
			 npm install -g cnpm --registry=https://registry.npmmirror.com
			 cnpm -v 出现许多行版本代码
			 

			 
			 // 3.安装VUE 脚手架、 vue-cli2.x (不需要做)
			 // cnpm  install vue-cli -g 
			 // vue -V   V是大写的
			 // 2.x 的版本已经安装好了
			 
			 // 4. 脚手架2.x的项目创建  (不需要做)
			 // 命令  进入文件夹   
			 // vue init webpack demo001    (demo001是你创建项目文件夹名字)
			 // cd demo001 进入  demo001文件夹
			 // npm run dev 运行项目
			 
			 // ctrl +  c 两次 退出
 
			 
			 5.可以开始创建vue-cli4.x +的版本项目 
			  cnpm install @vue/cli  -g  
				
				创建项目
			 vue create demo002  (demo002是你创建项目文件夹名字)
			 cd demo002 进入  demo001文件夹
			 npm run serve 运行项目

			 
			 
			 vue create demo002  创建一个项目 项目文件夹名字 demo002
			  项目设置  通过上下键控制  空格选中
			  ? Please pick a preset: Manually select features 
			  是否使用默认的配置  Manually select features 重新设置
			  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
			  >(*) Babel       //支持高阶语法转换
			   ( ) TypeScript   //支持TypeScript书写源码
			   ( ) Progressive Web App (PWA) Support   //支持PWA
			   (*) Router    //自动配置路由
			   (*) Vuex         //自动构建Vuex
			   (*) CSS Pre-processors   //css 预处理器
			   (*) Linter / Formatter   //代码风格检查和格式化
			   ( ) Unit Testing    //支持单元测试
			   ( ) E2E Testing   //支持E2E测试
			? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
			使用什么路由模式 一个是 hash #  一个是history
			? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
			选择css预处理器
			> Sass/SCSS (with dart-sass) 
			  Sass/SCSS (with node-sass)
			  Less
			  Stylus
			? Pick a linter / formatter config: (Use arrow keys)
			 代码风格（代码检测）；这个可以看个人喜好来选择；
			 > ESLint with error prevention only第一个是只检测
			   ESLint + Airbnb config
			   ESLint + Standard config 标准的
			   ESLint + Prettier精确的、漂亮的
			? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
			>(*) Lint on save   
			代码文件中有代码不符合 lint 规则时，会在 compile 阶段提示 warning。如果出现了语法错误，会直接在页面上显示 error
			 ( ) Lint and fix on commit
			 代码除了语法错误导致的 error 外不会提示 warning。而是在当前项目进行 git commit 操作的时候，通过 githook，在 pre-commit 
			 阶段执行 lint 和 fix 操作，自动帮我们把有语法错误的地方修改为符合规范。
			? Pick a E2E testing solution: (Use arrow keys)   选择E2E测试模式
			> Cypress (Chrome only)
			  Nightwatch (Selenium-based)
			 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
			 把babel这些配置放在哪里
			> In dedicated config files
			  In package.json
			? Save this as a preset for future projects? (y/N)  是否保存配置 也就是最开始的时候选择
			? Save preset as: 配置名字

			  
			  
		
			  
			
			
			目录介绍
			1. node_modules  文件夹
			    项目依赖(对webpack进行了封装)
			2. public 文件夹
			    1.favicon.ico  是 网站图标
			    2.index.html  页面入口文件
			     1.main.js   入口js
			4. postcss.config.js
			     使用autoprefixer   CSS兼容性插件， .browserslistrc配置使用CSS兼容性插件的使用范围
			5.  .eslintrc.js 配置
			6.  .gitignore 指定文件无需提交到git上
			7. balel.config.js 使用一些预设
			8. package.json 项目描述及依赖
			9. package-lock.json 版本管理使用的文件
			  
			   
			git上面下载的项目 都是 没有  node_modules 依赖目录的
			所以需要重新下载依赖 
			项目所有需要的依赖 都会配置在 package.json里面
			每个项目都会由很多的依赖  
			使用  cnpm install 或者 cnpm i 一次性安装所有依赖 (注:这个安装 基于package.json里面的配置 )
			
			所以当我们安装 项目所需要的插件的时候 记得保存我们依赖 在 package.json
			
			
			
			
			当安装了较多模块后，node_modules目录下的文件会很多，直接删除整个目录会很慢，
			下面介绍些快速删除node_modules目录的方法。
			方法一：使用rimraf模块的命令
			在全局安装rimraf模块，然后通过其命令来快速删除node_modules目录：
			npm install rimraf -g
			首先在cmd窗口中进入到node_modules文件夹所在的路径，接着执行命令
			rimraf node_modules
			
			
			方法二：使用Windows命令来删除目录
			Windows下使用rmdir命令
			首先在cmd窗口中进入到node_modules文件夹所在的路径，接着执行命令：
			
			rmdir /s/q node_modules
			
			
			打包白屏解决方案  
			在 vue.config.js  里面  
			
			module.exports = defineConfig({
				...,
				publicPath: "./"
			})
			
			
			
			
			
			
			*/
		</script>
	</body>
</html>